<template>
  <div class="design-table">
    <div class="content1">
      <el-checkbox v-model="propsData.tableProp.isCheckbox">是否多选</el-checkbox>
      <el-checkbox v-model="propsData.tableProp.isSerialNo">是否序号</el-checkbox>
      <el-checkbox v-model="propsData.tableProp.isPage">是否分页</el-checkbox>
      <el-checkbox v-model="propsData.tableProp.isBatchBut" @change="isBatchButChange">是否批量删除</el-checkbox>
      <el-radio-group v-model="propsData.tableProp.isSeeOrEditBut" @change="isSeeOrEditButChange" class="table-radio-css">
        <el-radio :label="1">查看/编辑</el-radio>
        <el-radio :label="2">查看</el-radio>
        <el-radio :label="3">不要查看和编辑</el-radio>
      </el-radio-group>
      <el-checkbox v-model="propsData.tableProp.isDelBut" @change="isDelButChange" class="ml-12">删除</el-checkbox>
      <el-button @click="propsData.tableProp.groupNameProp.isDrawer=true" class="ml-12">分组名称配置</el-button>
      <el-button @click="propsData.tableProp.headButProp.isDrawer=true" class="ml-12">表头按钮配置</el-button>
      <el-button @click="propsData.tableProp.operationBut.isDrawer=true">操作按钮配置</el-button>
    </div>
    <div class="content2">
      <el-button type="primary" @click="addFormField">添加字段</el-button>
      <el-button type="warning" @click="dataValidationClick">table字段验证</el-button>
    </div>

    <!--表格字段-->
    <el-table ref="table" :data="propsData.tableProp.tableArray" border style="width: 100%;margin-top: 15px"
              :header-cell-style="{background:'#f5f7fa',color:'#081333',fontWeight: 'normal'}"
              :default-sort="{prop: 'sort', order: 'ascending'}"
              height="742"
    >
      <el-table-column label="序号" type="index" width="50" align="center" fixed="left"/>
      <el-table-column label="名称" width="170" :show-overflow-tooltip="true" align="center" prop="name">
        <template slot-scope="scope">
          <el-input v-model="scope.row.name" placeholder="请输入名称" clearable></el-input>
        </template>
      </el-table-column>
      <el-table-column label="数据类型/分组名称" width="160" align="center" prop="name">
        <template slot-scope="scope">
          <el-select v-model="scope.row.type" placeholder="请选择数据类型">
            <el-option
                v-for="item in $store.state.tableFieldOption"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
          <el-select v-model="scope.row.groupName" placeholder="请选择分组名称" style="margin-top: 5px">
            <el-option
                v-for="item in propsData.tableProp.groupNameProp.arrayData"
                :key="item.label"
                :label="item.label"
                :value="item.label">
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="字段相关配置" width="630" align="center" prop="field">
        <template slot-scope="scope">
          <ul class="design-table-ul">
            <li>
              <template>
                <span>字段</span>
                <el-input v-model="scope.row.field" placeholder="字段"></el-input>
              </template>
              <template v-if="['日期和时间范围','日期范围','月份范围'].includes(scope.row.type)">
                <span>开始字段</span>
                <el-input v-model="scope.row.startField" placeholder="开始字段"></el-input>
                <span>结束字段</span>
                <el-input v-model="scope.row.endField" placeholder="结束字段"></el-input>
              </template>
              <template v-if="['文件上传','图片上传'].includes(scope.row.type)">
                <span>是否多文件</span>
                <el-checkbox v-model="scope.row.singleFile"></el-checkbox>
              </template>

              <template v-if="['单选框','多选框','下拉框'].includes(scope.row.type)">
                <span>数据来源</span>
                <el-select v-model="scope.row.selectProp.dataSources" placeholder="数据来源" style="width: 150px;flex: 0 0 auto">
                  <el-option
                      v-for="item in $store.state.formSelectOption"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                  </el-option>
                </el-select>
              </template>
            </li>

            <li v-if="['单选框','多选框','下拉框'].includes(scope.row.type)" class="mt-12">
              <template v-if="scope.row.selectProp.dataSources=='别的页面接口'">
                <span>接口名称</span>
                <el-input v-model="scope.row.selectProp.interfaceName" placeholder="接口名称"></el-input>
                <span>label字段</span>
                <el-input v-model="scope.row.selectProp.labelField" placeholder="label字段"></el-input>
                <span>value字段</span>
                <el-input v-model="scope.row.selectProp.valueField" placeholder="label字段"></el-input>
              </template>
              <template v-if="scope.row.selectProp.dataSources=='本页面接口'">
                <span>选择接口</span>
                <el-select v-model="scope.row.selectProp.interfaceName" placeholder="选择接口" style="width: 150px;flex: 0 0 auto">
                  <el-option
                      v-for="item in propsData.apiProp.apiArray2"
                      :key="item.notes"
                      :label="item.notes"
                      :value="item.notes">
                  </el-option>
                </el-select>
                <span>label字段</span>
                <el-input v-model="scope.row.selectProp.labelField" placeholder="label字段"></el-input>
                <span>value字段</span>
                <el-input v-model="scope.row.selectProp.valueField" placeholder="label字段"></el-input>
              </template>
              <template v-if="scope.row.selectProp.dataSources=='自定义'">
                <el-input type="textarea" placeholder="请输入我是文本域" v-model="scope.row.selectProp.text" :autosize="{ minRows: 2, maxRows: 4}" maxlength="30000" show-word-limit/>
              </template>
            </li>
          </ul>
        </template>
      </el-table-column>

      <el-table-column label="基础设置" align="left" prop="required">
        <template slot-scope="scope">
          <div class="design-table-content1">
            <el-checkbox v-model="scope.row.required">是否必填</el-checkbox>
            <el-checkbox v-model="scope.row.tabsSearch" @change="tabsSearchChange(scope.row)">tabs搜索</el-checkbox>
            <el-checkbox v-model="scope.row.display">不可更改</el-checkbox>
            <el-checkbox v-model="scope.row.rowData">row数据</el-checkbox>
          </div>
          <div class="design-table-content1">
            <el-checkbox v-model="scope.row.tableSee">表格不显示</el-checkbox>
            <el-checkbox v-model="scope.row.drawerSee">抽屉查看不显示</el-checkbox>
            <el-checkbox v-model="scope.row.drawerEdit">抽屉编辑不显示</el-checkbox>
            <el-checkbox v-model="scope.row.drawerSeeALine">抽屉查/编满一行</el-checkbox>
          </div>
          <div class="design-table-content1">
            <el-checkbox v-model="scope.row.isArray" @change="isArrayChange(scope.row.isArray,scope.row)">是否是数组</el-checkbox>
            <el-input type="textarea" v-if="scope.row.isArray" placeholder="链表id" v-model="scope.row.isArrayParams" :autosize="{ minRows: 2, maxRows: 4}" maxlength="30000" show-word-limit/>
            <el-checkbox v-model="scope.row.tabsSearchField" v-if="['单选框','多选框','下拉框'].includes(scope.row.type) && !scope.row.isArray"
                         @change="tabsSearchFieldChange(scope.row.tabsSearchField,scope.row)">tabs搜索字段
            </el-checkbox>

          </div>
        </template>
      </el-table-column>
      <el-table-column label="排序" width="70" :show-overflow-tooltip="true" align="center" sortable prop="sort" :sort-method="(a,b)=>{return a.sort - b.sort}">
        <template slot-scope="scope">
          <el-input v-model="scope.row.sort" placeholder="排序"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100" align="center">
        <template slot-scope="scope">
          <el-button type="danger" icon="el-icon-delete el-icon--left" @click="delClick(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分组名称配置 抽屉-->
    <el-dialog
        :append-to-body="true"
        :show-close="true"
        title="表头按钮配置"
        :visible.sync="propsData.tableProp.groupNameProp.isDrawer"
        custom-class="toConfigure-field-dialog"
        width="800px"
    >
      <design-table-group-name-prop :propsData="propsData" :key="$store.state.randomKey"/>
    </el-dialog>

    <!--表头按钮配置 抽屉-->
    <el-dialog
        :append-to-body="true"
        :show-close="true"
        title="表头按钮配置"
        :visible.sync="propsData.tableProp.headButProp.isDrawer"
        custom-class="toConfigure-field-dialog"
        width="1300px"
    >
      <design-table-title-but :propsData="propsData" :key="$store.state.randomKey"/>
    </el-dialog>

    <!--操作按钮配置 抽屉-->
    <el-dialog
        :append-to-body="true"
        :show-close="true"
        title="操作按钮配置"
        :visible.sync="propsData.tableProp.operationBut.isDrawer"
        custom-class="toConfigure-field-dialog"
        width="1300px"
    >
      <design-table-operation-but :propsData="propsData" :key="$store.state.randomKey"/>
    </el-dialog>

  </div>
</template>

<script>
import DesignTableOperationBut from "@/views/analysisGeneration/DesignTableOperationBut";
import DesignTableTitleBut from "@/views/analysisGeneration/DesignTableTitleBut";
import DesignTableGroupNameProp from "@/views/analysisGeneration/DesignTableGroupNameProp";

export default {
  components: {DesignTableGroupNameProp, DesignTableTitleBut, DesignTableOperationBut},
  props: ['propsData'],
  data() {
    return {};
  },
  mounted() {
  },
  methods: {
    //tabs搜索
    tabsSearchChange(row) {
      for (let i = 0; i < this.propsData.tableProp.tableArray.length; i++) {
        if (this.propsData.tableProp.tableArray[i] == row) {
          this.propsData.tableProp.tableArray[i].tabsSearchField = false;
          this.propsData.tableProp.tableArray[i].isArray = false;
        }
      }
    },
    //tabs搜索字段选择
    tabsSearchFieldChange(val, row) {
      for (let i = 0; i < this.propsData.tableProp.tableArray.length; i++) {
        this.propsData.tableProp.tableArray[i].tabsSearchField = false;
      }
      for (let i = 0; i < this.propsData.tableProp.tableArray.length; i++) {
        if (this.propsData.tableProp.tableArray[i] == row) {
          this.propsData.tableProp.tableArray[i].tabsSearchField = val;
          this.propsData.tableProp.tableArray[i].tabsSearch = false;
          this.propsData.tableProp.tableArray[i].isArray = false;
        }
      }
    },
    //是否是数组
    isArrayChange(val,row){
      for (let i = 0; i < this.propsData.tableProp.tableArray.length; i++) {
        if (this.propsData.tableProp.tableArray[i] == row) {
          this.propsData.tableProp.tableArray[i].tabsSearchField = false;
          this.propsData.tableProp.tableArray[i].tabsSearch = false;
          this.propsData.tableProp.tableArray[i].isArray = val;
        }
      }
    },
    //table数据验证
    dataValidationClick() {
      console.log(this.propsData.tableProp.tableArray)
      for (let i = 0; i < this.propsData.tableProp.tableArray.length; i++) {
        if (this.propsData.tableProp.tableArray[i].name == '') {
          this.$message.error(`${i + 1}---名称不能为空`);
          return false
        }
        if (this.propsData.tableProp.tableArray[i].field == '') {
          this.$message.error(`${i + 1}---字段不能为空`);
          return false
        }
        if (['日期和时间范围', '日期范围', '月份范围'].includes(this.propsData.tableProp.tableArray[i].type)) {
          if (this.propsData.tableProp.tableArray[i].startField == '') {
            this.$message.error(`${i + 1}---开始字段不能为空`);
            return false
          }
          if (this.propsData.tableProp.tableArray[i].endField == '') {
            this.$message.error(`${i + 1}---结束字段不能为空`);
            return false
          }
        }
        if (['单选框', '多选框', '下拉框'].includes(this.propsData.tableProp.tableArray[i].type)) {
          if (['别的页面接口', '本页面接口'].includes(this.propsData.tableProp.tableArray[i].selectProp.dataSources)) {
            if (this.propsData.tableProp.tableArray[i].selectProp.interfaceName == '') {
              this.$message.error(`${i + 1}---接口名称不能为空`);
              return false
            }
            if (this.propsData.tableProp.tableArray[i].selectProp.labelField == '') {
              this.$message.error(`${i + 1}---label字段不能为空`);
              return false
            }
            if (this.propsData.tableProp.tableArray[i].selectProp.valueField == '') {
              this.$message.error(`${i + 1}---value字段不能为空`);
              return false
            }
          }
        }
        let num = 0;
        for (let j = 0; j < this.propsData.tableProp.tableArray.length; j++) {
          if (this.propsData.tableProp.tableArray[i].field == this.propsData.tableProp.tableArray[j].field) {
            num = num + 1;
          }
        }
        if (num > 1) {
          this.$message.error(`${i + 1}---字段不能重复`);
          return false
        }
        this.$message.success(`form字段暂无错误`);
      }
    },
    //删除字段
    delClick(row) {
      for (let i = 0; i < this.propsData.tableProp.tableArray.length; i++) {
        if (this.propsData.tableProp.tableArray[i] == row) {
          this.propsData.tableProp.tableArray.splice(i, 1);
          return false
        }
      }
    },
    //添加表格字段
    addFormField() {
      let jsonData = {
        id: new Date().getTime(),
        name: '',//名称
        type: '输入框',//数据类型
        field: '',//字段
        startField: 'beginTime',//开始字段 时间范围
        endField: 'endTime',//结束字段 时间范围
        singleFile: true,//文件上传和图片是否多个文件  true 多个

        required: true,//是否必填 true 必填
        display: false,//不可更改  true 不可更改
        rowData: false,//是否row数据 true 是
        tabsSearch: false,//tabs搜索 true搜索
        sort: '10',//排序
        tableSee: false,//表格不显示 true是
        drawerSee: false,//抽屉查看不显示 true是
        drawerEdit: false,//抽屉编辑不显示 true是
        drawerSeeALine: true,//抽屉查看满一行 true是
        tabsSearchField: false,//tabs搜索字段
        isArray: false,//是否是数组
        isArrayParams: `{label:'id',value:'链表id'},
{label:'api注释前缀',value:'测试'},`,//是数组 id 链表匹配的id字段  api注释前缀 通过这个来增删改查
        groupName: '基础设置',//分组名称
        //单选框-下拉框-多选框 数据来源
        selectProp: {
          dataSources: '自定义',//单选框-下拉框-多选框 数据来源
          interfaceName: '',// 单选框-下拉框-多选框 本页或已有接口 接口名称
          labelField: '',//label字段
          valueField: '',//value字段
          //自定义 下拉框
          text: `{label:'',value:''},`,
        },
      }
      this.propsData.tableProp.tableArray.push(jsonData);
    },
    //是否批量删除
    isBatchButChange(val) {
      if (val) {
        let jsonData = {
          name: '批量删除',//按钮名称
          methodName: 'tableTitleButBatchDel',//按钮方法名称
          icon: 'el-icon-delete',//按钮图标
          color: 'danger',//按钮颜色
          butType: '批量删除',//按钮属性
          formName: '',//表单名称-下载模板名称-导出的接口
          sort: '99',//排序 从小到大
        };
        this.propsData.tableProp.headButProp.butArray.push(jsonData);
        this.propsData.tableProp.isCheckbox = val;
      } else {
        for (let i = 0; i < this.propsData.tableProp.headButProp.butArray.length; i++) {
          if (this.propsData.tableProp.headButProp.butArray[i].butType == '批量删除') {
            this.propsData.tableProp.headButProp.butArray.splice(i, 1);
          }
        }
      }
    },
    //是否删除按钮
    isDelButChange(val) {
      if (val) {
        let jsonData = {
          name: '删除',//按钮名称
          methodName: 'tableDelClick',//按钮方法名称
          icon: 'el-icon-delete',//按钮图标
          color: 'danger',//按钮颜色
          butType: '删除',//按钮属性
          formName: '',//表单名称-下载模板名称-导出的接口
          sort: '100',//排序 从小到大
        };
        this.propsData.tableProp.operationBut.butArray.push(jsonData);
      } else {
        for (let i = 0; i < this.propsData.tableProp.operationBut.butArray.length; i++) {
          if (this.propsData.tableProp.operationBut.butArray[i].butType == '删除') {
            this.propsData.tableProp.operationBut.butArray.splice(i, 1);
          }
        }
      }
    },
    //1：查看/编辑按钮 2：查看 3：都不要
    isSeeOrEditButChange(val) {
      if (val == 1) {
        let num = 0;
        for (let i = 0; i < this.propsData.tableProp.operationBut.butArray.length; i++) {
          if (this.propsData.tableProp.operationBut.butArray[i].butType == '查看') {
            this.propsData.tableProp.operationBut.butArray[i].butType = '查看/编辑';
            this.propsData.tableProp.operationBut.butArray[i].name = '查看/编辑';
            num += 1;
          }
        }
        if (!num) {
          let jsonData = {
            name: '查看/编辑',//按钮名称
            methodName: 'tableSeeClick',//按钮方法名称
            icon: 'el-icon-view',//按钮图标
            color: 'primary',//按钮颜色
            butType: '查看/编辑',//按钮属性
            formName: '',//表单名称-下载模板名称-导出的接口
            sort: '0',//排序 从小到大
          };
          this.propsData.tableProp.operationBut.butArray.push(jsonData);
        }
      } else if (val == 2) {
        let num = 0;
        for (let i = 0; i < this.propsData.tableProp.operationBut.butArray.length; i++) {
          if (this.propsData.tableProp.operationBut.butArray[i].butType == '查看/编辑') {
            this.propsData.tableProp.operationBut.butArray[i].butType = '查看';
            this.propsData.tableProp.operationBut.butArray[i].name = '查看';
            num += 1;
          }
        }
        if (!num) {
          let jsonData = {
            name: '查看',//按钮名称
            methodName: 'tableSeeClick',//按钮方法名称
            icon: 'el-icon-view',//按钮图标
            color: 'primary',//按钮颜色
            butType: '查看',//按钮属性
            formName: '',//表单名称-下载模板名称-导出的接口
            sort: '0',//排序 从小到大
          };
          this.propsData.tableProp.operationBut.butArray.push(jsonData);
        }
      } else {
        for (let i = 0; i < this.propsData.tableProp.operationBut.butArray.length; i++) {
          if (['查看/编辑', '查看'].includes(this.propsData.tableProp.operationBut.butArray[i].butType)) {
            this.propsData.tableProp.operationBut.butArray.splice(i, 1);
          }
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.design-table {
  .content1 {
    @include flex();

    .table-radio-css {
      padding-top: 3px;

      .el-radio {
        margin-right: 12px;
      }
    }
  }

  .content2 {
    margin-top: 12px;
  }

  .design-table-content1 {
    margin-bottom: 5px;
    @include flex(wrap);

    .el-checkbox {
      margin-right: 15px;
    }

    .s {
      @include flex();

      span {
        width: 56px;
        flex: 0 0 auto;
        text-align: right;
        margin-right: 10px;
      }

      .el-input {
        flex: 0 0 auto;
        width: 80px;
      }
    }
  }
}
</style>
